import React, { useState, useEffect } from 'react'
import { Chart } from '@antv/g2';
import { Col, Row } from 'antd';



export default function DashBoard() {

    // AntV 官网简单引入charts
    // https://g2.antv.antgroup.com/manual/getting-started
    const initialChart = () => {
        // 准备数据
        const data = [
            { 手机品牌: 'HuaWei', 销量: 460 },
            { 手机品牌: 'Mi', 销量: 660 },
            { 手机品牌: 'Oppo', 销量: 550 },
            { 手机品牌: 'Vivo', 销量: 540 },
            { 手机品牌: 'Samung', 销量: 120 },
            { 手机品牌: 'iPhone', 销量: 60 },
            { 手机品牌: 'Other', 销量: 180 }
        ];

        // 初始化图表实例
        const chart = new Chart({
            // 响应式数据 图标自适设备屏幕大小   autoFit: true,
            autoFit: true,
            container: 'chartContainer',
            theme: 'classic',
        });

        // 声明可视化
        chart
            .interval() // 创建一个 Interval 标记
            .data(data) // 绑定数据
            .encode('x', '手机品牌') // 编码 x 通道
            .encode('y', '销量'); // 编码 y 通道


        // 渲染可视化
        chart.render();
    }

    // 调用charts
    useEffect(() => {
        initialChart()
    }, [])

    return (

        <>
            <div>
                {/* redux 实现 组件-栅格 响应式数据屏幕大小自适应 */}
                {/* layout侧边栏折叠 栅格一行几列   store文件夹 + layout布局文件 */}
                <Row gutter={16}>
                    <Col xs={24} sm={12} md={6} >
                        <div style={{ height: 60, background: '#27E2EE' }}></div>
                    </Col>
                    <Col xs={24} sm={12} md={6} >
                        <div style={{ height: 60, background: '#65F4C0' }}></div>
                    </Col>
                    <Col xs={24} sm={12} md={6} >
                        <div style={{ height: 60, background: '#38ECDB' }}></div>
                    </Col>
                    <Col xs={24} sm={12} md={6} >
                        <div style={{ height: 60, background: '#96F9A2' }}></div>
                    </Col>
                </Row>
            </div>

            {/* charts容器 autoFit: true--响应式数据屏幕大小自适应  AntV G2 自带属性*/}
            <div id="chartContainer" style={{ width: 600, height: 320 }}></div>
        </>
    )
}
